<template>
  <div>
    <!-- 1.0卡片布局 -->
    <Card :color="colorArr" :list="cardList" />
    <!-- 2.0表格折线图 -->
    <EchartsLineS @sendData="getSonData" />
  </div>
</template>

<script>
import Card from './components/Card.vue'
import EchartsLineS from './components/LineCharts.vue'
import { Homelines } from '@/api/EchartsLine.js'

export default {
  components: { Card, EchartsLineS },
  data() {
    return {
      dataControl: [],
      colorArr: ['#1296db', '#d4237a', '#1296db', '#1afa29'],
      cardList: [
        {
          id: 1,
          icon: 'icon-wenjian',
          text: '总订单',
          num: '102,400',
          name: 'totalOrder'
        },
        {
          id: 2,
          icon: 'icon-Dollar',
          text: '总销售额',
          num: '102,400',
          name: 'totalAmount'
        },
        {
          id: 3,
          icon: 'icon-renwu',
          text: '今日订单数',
          num: '102,400',
          name: 'todayOrder'
        },
        {
          id: 4,
          icon: 'icon-renminbi',
          text: '今日销售额',
          num: '102,400',
          name: 'totayAmount'
        }
      ]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const data = await Homelines()
      console.log(data)
      this.cardList.forEach(item => {
        for (const k in data) {
          if (k === item.name) {
            item.num = data[k]
          }
        }
      })
      // 把x轴坐标的数据请求回来,并传入子组件中
      const obj = this.dataControl
      //先根据请求,修改x轴的数据,再渲染页面
      obj.option.xAxis.data = data.xData
      obj.option.series[0].data = data.amountData
      obj.option.series[1].data = data.orderData
      obj.myChart.setOption(obj.option)
    },
    getSonData(o) {
      this.dataControl = o
    }
  }
}
</script>

<style lang="less" scoped></style>
